<template>
  <div class="member-list">
    <!--    系统设置-业务配置-->
    <div class="table-top flex-row-center-space">
      <RadioGroup v-model:value="radioVal" button-style="solid" @change="handleRadioChange">
        <RadioButton v-for="item in bizConfigTypeList" :key="item.value" :value="item.value">{{
          item.label
        }}</RadioButton>
      </RadioGroup>
      <Button :type="'primary'" @click="handleEdit">
        {{ dataSource.length ? '编辑' : '新增' }}</Button
      >
    </div>

    <Table size="small" :pagination="false" :columns="tableColumns" :dataSource="dataSource">
      <template #bodyCell="{ text, column, record }">
        <template v-if="column.dataIndex === 'value'">
          {{ valueText(text, record) }}
        </template>
      </template>
    </Table>

    <SpuCategoryModal @register="registerModal" @success="handleSuccess" />
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import mcApi from 'mc-c2b2m-operator-api';
  import SpuCategoryModal from './modal.vue';
  import { useModal } from '@/components/Modal';
  import { handleAddrText } from '@/hooks/web/useCommon';
  import { tableColumns } from '@/views/system/bizConfig/data';
  import { Table, Button, RadioGroup, RadioButton } from 'ant-design-vue';
  import { BizConfigTypeEnum, bizConfigTypeList } from '@/enums/systemEnum';

  const { SystemModule } = mcApi;
  const { BizConfigApi } = SystemModule;

  const [registerModal, { openModal, closeModal }] = useModal();

  const dataSource = ref<any>([]);
  const { CS_PHONE, SELF_PICKUP_ADDR } = BizConfigTypeEnum;
  const radioVal = ref<BizConfigTypeEnum>(CS_PHONE);
  const valueText = computed(() => {
    return (text: any, record: any) => {
      if (radioVal.value === SELF_PICKUP_ADDR) {
        const { extDetailsInfo } = record;
        return handleAddrText(extDetailsInfo, false);
      }
      return text;
    };
  });

  fetch();

  async function fetch() {
    const result = await BizConfigApi.getBizConfig(radioVal.value);
    dataSource.value = result ? [result] : [{ type: radioVal.value }];
  }
  function handleRadioChange() {
    fetch();
  }
  function handleEdit() {
    openModal(true, {
      dataSource: dataSource.value?.[0] || {},
    });
  }
  function handleSuccess() {
    closeModal();
    fetch();
  }
</script>
<style scoped lang="scss">
  :deep(.ant-table-thead > tr > th) {
    background: #fff;
  }

  .table-top {
    width: 100%;
    padding: 10px;
    background: #fff;
  }
</style>
